import React,{ Component, Fragment } from "react";
import "./index.scss";
import { NavLink } from "react-router-dom";
import { Tabs, WhiteSpace, Modal } from "antd-mobile";
import { connect } from "react-redux";
import actions from "../../store/modules/details/actions";

class Details extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs2: [
        { title: "图书简介", sub: "1" },
        { title: "评论", sub: "2" },
        { title: "更多信息", sub: "3" }
      ],
      modal: false
    };
  }
  showModal = key => e => {
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true
    });
  };
  onClose = key => () => {
    this.setState({
      [key]: false
    });
  };
  render() {
    return (
      <div className="g-doc">
        <div className="g-hd">
          <ul className="m-pagenav">
            <NavLink to="/">
              <li className="itm iconfont icon-icon" />
            </NavLink>
            <li className="itmm">
              <b />
            </li>
            <li className="itms">图书详情</li>
          </ul>
          <div className="act">
            <div
              className="m-login iconfont icon-sanheng"
              onClick={this.showModal("modal")}
            />
            <NavLink to="/search">
              <div className="m-search iconfont icon-sousuo" />
            </NavLink>
          </div>
        </div>
        <div className="g-bd">
          {
            this.props.data
            .filter(item => item.id === parseInt(this.props.match.params.bookId))
            .map(book => (
              <Fragment key={book.id}>
                <div className="m-bookdata">
                  <div className="cover">
                    <img src={book.img} />
                  </div>
                  <div className="desc">
                    <div className="wrap">
                      <h1>{book.bookName}</h1>
                      <div className="u-starfive">
                        <div className="u-star">
                          <p>{book.score}</p>
                          <span>分</span>
                        </div>
                      </div>
                    </div>

                    <div className="data">
                      <ul className="data-m">
                        <li>
                          <span>作者：</span>
                          <p>{book.author}</p>
                        </li>
                        <li>
                          <span>版权：</span>
                          <p>{book.copyRight}</p>
                        </li>
                        <li>
                          <span className="data-l">
                            <del>¥ {book.eBookPrice}</del>
                          </span>
                          <span>
                            纸书<del>¥ {book.paperBookPrice}</del>
                          </span>
                          <b>{book.discount}折</b>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div className="m-bookact">
                  <ul className="m-bookact-ul">
                    <li className="m-bookact-ul-l">8.99 米币</li>
                    <li className="m-bookact-ul-r">免费试读</li>
                  </ul>
                </div>
                <div className="context">
                  <Tabs
                    tabs={this.state.tabs2}
                    initialPage={0}
                    renderTab={tab => <span>{tab.title}</span>}
                  >
                    <div className="u-view">
                      <div className="m-bookdetail">
                        <p>
                          {book.briefIntroduction}
                        </p>
                      </div>
                      <div className="u-more-s">
                        <div className="u-more-r">
                          完整简介<b className="iconfont icon-icon-yjt" />
                        </div>
                      </div>
                      {/* 目录 */}
                      <div className="toc-doc">
                        <h3 className="u-ttle">目录</h3>
                        <div className="toc">
                          <ol>
                            <li>
                              <h3>{book.catalog.preface}</h3>
                              <div className="brief">
                                <p>
                                {book.catalog.prefaceContext}
                                </p>
                              </div>
                            </li>
                            {
                              book.catalog.chapter.map(chapte => (
                                <li key={chapte.chapterTitle}>
                                  <h3>{chapte.chapterTitle}</h3>
                                  <div className="brief">
                                    <p>
                                    {chapte.chapterContext}
                                    </p>
                                  </div>
                                </li>
                              ))
                            }
                          </ol>
                        </div>
                        <div className="u-more">
                          <div className="u-more-l">
                            完整目录<b className="iconfont icon-icon-yjt" />
                          </div>
                        </div>
                      </div>
                    </div>
                    {/* 评论 */}
                    <div className="u-comment">
                      <div className="u-commlist">
                        <ul>
                          {book.comment.map(comm => (
                            <li key={comm.time}>
                              <div className="article">
                                <p>{comm.opinion}</p>
                              </div>
                              <div className="u-commctrl">
                                 {comm.time}
                                <div className="u-commctrl-w">
                                  <b className="iconfont icon-kulian">1</b>
                                </div>
                              </div>
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div className="j-page">
                        <div className="u-page">
                          <NavLink className="j-pre" to="/a">
                            上一页
                          </NavLink>
                          <div className="num">
                            <span>
                              第<span>1</span>/21页
                            </span>
                          </div>
                          <NavLink className="j-nxt" to="/a">
                            下一页
                          </NavLink>
                        </div>
                      </div>
                    </div>
                    <div className="information">
                      <div className="information-list">
                        <ul>
                          <li>
                            作者：<span>{book.information.author}</span>
                          </li>
                          <li>
                            字数：<span>{book.information.word}</span>
                          </li>
                          <li>
                            大小：<span>{book.information.size}</span>
                          </li>
                          <li>
                            书号：<span>{book.information.book}</span>
                          </li>
                          <li>
                            出版：<span>{book.information.publish}</span>
                          </li>
                          <li>
                            更新：<span>{book.information.update}</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </Tabs>
                  <WhiteSpace />
                </div>
              </Fragment>
            ))}
          <div className="g-ft">
            <div className="m-cprt">
              <p className="m-crip">
                <span>多看客户端</span>
                <b>|</b>
                <span>电脑版</span>
              </p>
              <p>Copyright©duokan.com</p>
            </div>
          </div>
        </div>
        <Modal
          popup
          visible={this.state.modal}
          onClose={this.onClose("modal")}
          animationType="fade"
        >
          <div className="m-nav">
            <ul className="m-nav-top">
              <li>
                <NavLink
                  to="/special"
                  className="box"
                  style={{ backgroundColor: "#ef4848" }}
                >
                  <i className="iconfont icon-sale" />
                </NavLink>
                <span>特价</span>
              </li>
              <li>
                <NavLink
                  to="/free"
                  className="box"
                  style={{ backgroundColor: "#f7942b" }}
                >
                  <i className="iconfont icon-Free-Tag" />
                </NavLink>
                <span>免费</span>
              </li>
              <li>
                <NavLink
                  to="/best"
                  className="box"
                  style={{ backgroundColor: "#2ec8e4" }}
                >
                  <i className="iconfont icon-tubiaolunkuo-" />
                </NavLink>
                <span>畅销</span>
              </li>
              <li>
                <NavLink
                  to="/shelf"
                  className="box"
                  style={{ backgroundColor: "#2ec8e4" }}
                >
                  <i className="iconfont icon-icon_shujianor" />
                </NavLink>
                <span>书架</span>
              </li>
            </ul>
            <ul className="m-nav-bottom">
              <li>
                <NavLink
                  to="/classify"
                  className="box"
                  style={{ backgroundColor: "#02d26e" }}
                >
                  <i className="iconfont icon-fenlei" />
                </NavLink>
                <span>分类</span>
              </li>
              <li>
                <NavLink
                  to="/redeem"
                  className="box"
                  style={{ backgroundColor: "#4f8fd6" }}
                >
                  <i className="iconfont icon-shuquan" />
                </NavLink>
                <span>兑换码</span>
              </li>
              <li>
                <NavLink
                  to="/coupon"
                  className="box"
                  style={{ backgroundColor: "#7cc416" }}
                >
                  <i className="iconfont icon-changxiaoremai" />
                </NavLink>
                <span>购书券</span>
              </li>
              <li>
                <a
                  href='http://www.duokan.com/product'
                  className="box"
                  style={{ backgroundColor: "#f7942b" }}
                >
                  <i className="iconfont icon-bangzhushouji" />
                </a>
                <span>客户端</span>
              </li>
            </ul>
          </div>
        </Modal>
      </div>
    );
  }
  componentDidMount() {
    this.props.getDetails();
  }
}

export default connect(
  state => {
    return {
      data: state.details.detailsList
    };
  },
  (dispatch, props) => {
    return {
      getDetails: () => {
        console.log(props);
        dispatch(actions.getDetailsAct());
      }
    };
  }
)(Details);
